<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>弹出框选择</title>
	<link rel="stylesheet" href="../stylesheets/common.css" />
	<link rel="stylesheet" href="../stylesheets/table.css" />
</head>

<body>
	<div class="place">
		<span class="label-span">位置：</span>
		<ul id="place-list" class="place-ul">
			<li>
				首页
			</li>
		</ul>
	</div>
	<div class="body-warp">
		<div class="panel">
			<div class="panel-title">
				<i class="form-icon"></i>
				<span class="title-text">基本信息</span>
			</div>
			<div class="panel-body">
				<form>
					<table class="form-table">
						<tr>
							<td colspan="2">
								<span class="form-tip alert alert-info">改变
                                    <span class="code">class="form-label"</span> 的宽度请在
								<span class="code">class="form-table"</span> 上添加
								<span class="code">class="middle-label"</span> 或
								<span class="code">class="big-label"</span> 样式
								</span>
							</td>
						</tr>
						<tr>
							<td>
								<label class="form-label" for="search1">文本框<b class="red">*</b></label>
							</td>
							<td>
								<!-- 面板视图占位符（可选）panel-viewport为占位符的作用 -->
								<div class="popup-select-panel panel-viewport">
								</div>


								<div id="popupSelectBox" class="hide panel-body popup-select-box">

								</div>
								<a href="javascript:void(0);" class="btn btn-primary" id="popup"><i class="iconfont">&#xe61b;</i>选择父单位</a>

							</td>
						</tr>
						<tr>
							<td>
								<label class="form-label" for="search1">文本框<b class="red">*</b></label>
							</td>
							<td>
								<input class="form-control error-input" id="search1" type="text" />
								<span class="form-tip alert alert-info">提示文本</span>

							</td>
						</tr>
						<tr>
							<td>
								<label class="form-label" for="search1">提示框<b class="red">*</b></label>
							</td>
							<td>
								<span class="form-hint">HTTP://</span>
								<!-- TODO 可考虑用JS自动设置宽度(放弃)，目前手动form-control默认总宽为346px 用审查元素查看提示文本所占的总宽，相减-->
								<input style="width:281px" class="form-control" id="search1" type="text" />
								<span class="form-tip alert alert-info">提示文本</span>
							</td>
						</tr>
						<tr>
							<td>
								<label class="form-label" for="search-select">下拉框<b class="red">*</b></label>
							</td>
							<td>
								<select class="form-select" id="search-select" disabled="disabled">
									<option value="">请选择条件</option>
									<option>按名称</option>
									<option>按身份</option>
									<option>按时间</option>
								</select>
								<span class="form-tip alert alert-danger">危险文本</span>
							</td>
						</tr>
						<tr>
							<td>
								<label class="form-label" for="search2">日期控件</label>
							</td>
							<td>
								<input class="form-control date" id="search2" type="text" />
								<span class="form-tip alert alert-success">成功提示</span>
							</td>
						</tr>
						<tr>
							<td>
								<label class="form-label">单选框复选框（数量少时）</label>
							</td>
							<td>
								<input class="form-radio" id="d1" type="radio" name="d1" />
								<label class="mr-10" for="d1">单选1991-03-29</label>

								<input class="form-checkbox" id="d3" type="checkbox" />
								<label class="mr-10" for="d3">多选1991-03-29</label>
							</td>
						</tr>
						<tr>
							<td>
								<label class="form-label">单选框复选框（数量多时）</label>
							</td>
							<td>
								<ul class="form-option-group clearfix">
									<li class="form-option-list form-option-list-all">
										<input class="form-radio" id="d1" type="checkbox" name="d1" />
										<label class="mr-10" for="d1">全选</label>
									</li>
									<li class="form-option-list">
										<input class="form-radio" id="d1" type="checkbox" name="d1" />
										<label class="mr-10" for="d1">数量多</label>
									</li>
									<li class="form-option-list">
										<input class="form-radio" id="d1" type="checkbox" name="d1" />
										<label class="mr-10" for="d1">时能根据</label>
									</li>
									<li class="form-option-list">
										<input class="form-radio" id="d1" type="checkbox" name="d1" />
										<label class="mr-10" for="d1">整个单选框的长度</label>
									</li>
									<li class="form-option-list">
										<input class="form-radio" id="d1" type="checkbox" name="d1" />
										<label class="mr-10" for="d1">自动换行</label>
									</li>
									<li class="form-option-list">
										<input class="form-radio" id="d1" type="checkbox" name="d1" />
										<label class="mr-10" for="d1">若增加全选换行，请在第一li上面加上class=form-option-list-all</label>
									</li>
									<li class="form-option-list">
										<input class="form-radio" id="d1" type="checkbox" name="d1" />
										<label class="mr-10" for="d1">多选显示区域与表单项对齐，若想自适应，请删除class=form-option-group</label>
									</li>

								</ul>
							</td>
						</tr>
						<tr>
							<td>
								<label class="form-label">文本显示</label>
							</td>
							<td>
								<div class="form-text">文本显示文本显示文本显示文本显示</div>
							</td>
						</tr>
						<tr>
							<td>
								<label class="form-label">上传文件</label>
							</td>
							<td>
								<input id="upload" type="file" />
							</td>
						</tr>
						<!-- textarea加这个类 保持label对齐 -->
						<tr class="valign-top">
							<td>
								<label class="form-label" for="search4">输入域</label>
							</td>
							<td>
								<textarea class="form-textarea" id="search4" name=""></textarea>
								<span class="form-tip alert alert-warning">警告提示</span>
							</td>
						</tr>

						<tr class="valign-top">
							<td>
								<label class="form-label" for="search4">输入域</label>
							</td>
							<td>
								<textarea class="form-textarea" id="search4" name="" maxlength="10"></textarea>
								<span class="form-tip alert alert-warning">警告提示</span>
							</td>
						</tr>
						<tr>
							<td>
								<label class="form-label" for="search4">多选下拉</label>
							</td>
							<td>
								<select id="select" name="f" data-placeholder="请选择" multiple>
									<option data-selected="true" value="1">你好</option>
									<option data-selected="true" value="2">你好</option>
									<option value="3">你好</option>
									<option value="4">你好</option>
									<option value="5">你好</option>
									<option value="6">你好</option>
									<option value="7">你好</option>
									<option value="8">你好</option>
									<option value="9">你好</option>
									<option value="10">你好</option>
								</select>
								<div class="ui-selectbox select-multiply" data-placeholder="请选择" style="display: none;">
									<ul class="ui-selectbox-label">
										<li class="ui-selectbox-inner">请选择</li>
										<li class="ui-selectbox-label-item">
											<span>你好你好你好你好你好</span>
											<i class="iconfont">&#xe628;</i>
										</li>
										<li class="ui-selectbox-label-item">
											<span>你好</span>
											<i class="iconfont">&#xe628;</i>
										</li>
										<li class="ui-selectbox-label-item">
											<span>你好</span>
											<i class="iconfont">&#xe628;</i>
										</li>
										<li class="ui-selectbox-label-item">
											<span>你好</span>
											<i class="iconfont">&#xe628;</i>
										</li>
										<li class="ui-selectbox-label-item">
											<span>你你好你好你好你好好</span>
											<i class="iconfont">&#xe628;</i>
										</li>
										<li class="ui-selectbox-label-item">
											<span>你好</span>
											<i class="iconfont">&#xe628;</i>
										</li>
										<li class="ui-selectbox-label-item">
											<span>你好</span>
											<i class="iconfont">&#xe628;</i>
										</li>
										<li class="ui-selectbox-label-item">
											<span>你好</span>
											<i class="iconfont">&#xe628;</i>
										</li>
										<li class="ui-selectbox-label-item">
											<span>你好</span>
											<i class="iconfont">&#xe628;</i>
										</li>
									</ul>
									<div class="ui-selectbox-drop">
										<ul class="ui-selectbox-drop-ul">
											<li class="ui-selectbox-drop-option" data-value="a">
												<a href="javascript:void(0);">a</a>
											</li>
											<li class="ui-selectbox-drop-option selected" data-value="b">
												<a href="javascript:void(0);">b</a>
											</li>
											<li class="ui-selectbox-drop-option" data-value="c">
												<a href="javascript:void(0);">c</a>
											</li>
											<li class="ui-selectbox-drop-option" data-value="d">
												<a href="javascript:void(0);">d</a>
											</li>
											<li class="ui-selectbox-drop-option" data-value="a">
												<a href="javascript:void(0);">a</a>
											</li>
											<li class="ui-selectbox-drop-option selected" data-value="b">
												<a href="javascript:void(0);">b</a>
											</li>
											<li class="ui-selectbox-drop-option" data-value="c">
												<a href="javascript:void(0);">c</a>
											</li>
											<li class="ui-selectbox-drop-option" data-value="d">
												<a href="javascript:void(0);">d</a>
											</li>
											<li class="ui-selectbox-drop-option" data-value="a">
												<a href="javascript:void(0);">a</a>
											</li>
											<li class="ui-selectbox-drop-option selected" data-value="b">
												<a href="javascript:void(0);">b</a>
											</li>
											<li class="ui-selectbox-drop-option" data-value="c">
												<a href="javascript:void(0);">c</a>
											</li>
											<li class="ui-selectbox-drop-option" data-value="d">
												<a href="javascript:void(0);">d</a>
											</li>
											<li class="ui-selectbox-drop-option" data-value="a">
												<a href="javascript:void(0);">a</a>
											</li>
											<li class="ui-selectbox-drop-option selected" data-value="b">
												<a href="javascript:void(0);">b</a>
											</li>
											<li class="ui-selectbox-drop-option" data-value="c">
												<a href="javascript:void(0);">c</a>
											</li>
											<li class="ui-selectbox-drop-option" data-value="d">
												<a href="javascript:void(0);">d</a>
											</li>
										</ul>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<!-- 空内容的td 保持间距 -->
							<td>
								<label class="form-label">&nbsp;</label>
							</td>
							<td>
								<input class="btn btn-success btn-large" type="submit" value="提交">
								<input class="btn btn-danger btn-large" type="reset" value="重置">
								<input class="btn btn-danger btn-large return-btn" data-href="/manager/users" type="button" value="返回">
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>





	<script type="text/javascript" src="../ext/jquery/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../ext/jquery/selectbox.js"></script>
	<script type="text/javascript" src="../ext/zw/check.js"></script>
	<script type="text/javascript" src="../ext/cxselect/jquery.cxselect.js"></script>
	<script type="text/javascript" src="../ext/layer_v2/layer.js"></script>
	<script type="text/javascript" src="../ext/zw/popupselectbox.js"></script>
	<script type="text/javascript" src="../javascripts/tool.js"></script>
	<script>
		$(function () {



			//显示目标或者ajax动态加载数据，标题，宽高

			//当要配置的内容多时，使用可以传入一个setting配置对象
			/*
							var popupSelectBox = popupSelectBox("#fatherUnit", "所有图标", 400,600,yesCallback,cancelCallback);
			*/
			//单一的结构
			var data = [
				{
					name: "智课智课智课",
					image: "../images/icon/icon2.png",
					selected: true,
				},
				{
					name: "主平台智课",
					image: "../images/icon/icon3.png",
				},
				{
					name: "评比",
					image: "../images/icon/icon4.png",
				},
				{
					name: "评价",
					image: "../images/icon/icon5.png",
					selected: true,
				},
				{
					name: "信息",
					image: "../images/icon/icon6.png",
				},
				{
					name: "资讯",
					image: "../images/icon/icon7.png",
				}, {
					name: "信息",
					image: "../images/icon/icon8.png",
				}, {
					name: "组织",
					image: "../images/icon/icon9.png",
				}, {
					name: "权限",
					image: "../images/icon/icon10.png",
				}, {
					name: "图片",
					image: "../images/icon/icon11.png",
				}, {
					name: "视频",
					image: "../images/icon/icon12.png",
				}, {
					name: "智课",
					image: "../images/icon/icon2.png",
					selected: true,
				},
				{
					name: "主平台",
					image: "../images/icon/icon3.png",
				},
				{
					name: "评比",
					image: "../images/icon/icon4.png",
				},
				{
					name: "评价",
					image: "../images/icon/icon5.png",
					selected: true,
				},
				{
					name: "信息",
					image: "../images/icon/icon6.png",
				},
				{
					name: "资讯",
					image: "../images/icon/icon7.png",
				}, {
					name: "信息",
					image: "../images/icon/icon8.png",
				}, {
					name: "组织",
					image: "../images/icon/icon9.png",
				}, {
					name: "权限",
					image: "../images/icon/icon10.png",
				}, {
					name: "图片",
					image: "../images/icon/icon11.png",
				}, {
					name: "视频",
					image: "../images/icon/icon12.png",
				}, {
					name: "智课",
					image: "../images/icon/icon2.png",
					selected: true,
				},
				{
					name: "主平台",
					image: "../images/icon/icon3.png",
				},
				{
					name: "评比",
					image: "../images/icon/icon4.png",
				},
				{
					name: "评价",
					image: "../images/icon/icon5.png",
					selected: true,
				},
				{
					name: "信息",
					image: "../images/icon/icon6.png",
				},
				{
					name: "资讯",
					image: "../images/icon/icon7.png",
				}, {
					name: "信息",
					image: "../images/icon/icon8.png",
				}, {
					name: "组织",
					image: "../images/icon/icon9.png",
				}, {
					name: "权限",
					image: "../images/icon/icon10.png",
				}, {
					name: "图片",
					image: "../images/icon/icon11.png",
				}, {
					name: "视频",
					image: "../images/icon/icon12.png",
				},
		];

			var setting = {
					//主要显示:image，只显示图片，标题作为图片title属性
					//主要显示:text，只显示文本，忽略图片
					//主要显示:all，即(先）显示图片，也显示文本
					"mainShow": "all",
					//启用多选
					"enabledMultiple": false,
					//启用网格
					//"enabledGrid": true,

					//启用搜索(未完成)
					//"enabledSearch": true,
					//启用分页(未完成)
					//"enabledPagination": true,
					//启用视图(部分完成)
					//"enabledPanelview": true,
					//自动显示在面板里视图
					//"autoShowPanelview": false,
					//多选限制个数
					//"multipleSize": null,
					//TODO 分页每页数目(未完成)
					//"count": 2,
				}
				//弹出选择框实例化
			popup = $("#popupSelectBox").popupSelectBox(data, setting, function () {});


			//面板点击打开树下拉事件
			$(".popup-select-panel").bind("click", function (event) {

				/*//弹出success回调回调函数
								var successCallback = function (layero, index) {}

								//弹出yes回调回调函数
								var yesCallback = function (index, layero) {}

								//弹出no回调回调函数
								var cancelCallback = function (index, layero) {}

								popup.popup("所有图标", ['630px', '518px'], ['选择', '关闭'], successCallback, yesCallback, cancelCallback);*/

				popup.popup("所有图标", ['630px', '518px'], ['选择', '关闭'], function () {}, function () {
					console.log(popup.getSelectedItem());
				});

				$(this).addClass("popup-select-panel-focus");
				$(this).addClass("ui-selectbox-open");
				event.stopPropagation();
			});
			/* 初始化控件 */
			initWidget();

			/*侦听*/
			addListeners();
		});

		/*初始化树*/
		function initTree() {

		}


		/*初始化控件*/
		function initWidget() {

			//初始化独立下拉菜单
			$('.form-select').each(function (index, el) {
				selectbox(this);
			});
		}

		function addListeners() {
			$("#popup").click(function () {
				popup.popup("所有图标", ['630px', '518px'], ['选择', '关闭'], function () {}, function () {
					console.log(popup.getSelectedItem());
				});
			})
		}
	</script>
</body>

</html>